<template>
  <div class="reportList" ref="container">
    <h3 class="title">思想汇报列表</h3>
    <Loading v-if="notMore" class="empty-text-wrap"/>
    <mu-load-more   :loading="loading" @load="load">
      <div>
        <ul>
          <li @click="goReportContent(item)" v-for="(item,index) in reportContentList" :key="index">
            <div class="content">
              <p>{{item.title}}</p>
              <div>
                <div class="date">{{item.create_time|time}}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </mu-load-more>
    <div class="loading" v-if="loadOver" :class="{'notPageOne':p>1||reportContentList.length<5}">{{loaded}}</div>
  </div>
</template>

<script>
import Loading from '@/components/emptyText.vue';
export default {
  data() {
    return {
      refreshing: false,
      reportContentList:[],
      p:1,
      page:10,
      loaded:'加載更多...',
      notMore:false,
      loading:false,
      loadOver:false,
    }
  },
  created(){
    this.getReport()
  },
  mounted() {
  },
  methods: {
    goReportContent(item){
      this.$router.push({ path:'/mine/report/content' ,query:item})
    },
    async getReport(){
        let that =this;
      try {
        let params = {
          p: this.p,
          page: this.page,
          uid: JSON.parse(Cookies.get('user_71ydj')).id
        }
        const url = `app/report/appshow`
        let res = await this.$http.get(url, params)
        this.loading = false;
        this.$progress.done();
          if (res.data.length) {
              // that.info = res.data.moral_index
              console.log(res.data)
              that.reportContentList.push(...res.data);
          }
          this.loadOver = false;
          if (this.p != 1) {
              console.log(res.data);
              if (res.data.length) {
                  console.log(res.data)
              } else {
                  this.loadOver = true;
                  this.loading = false;
                  this.loaded = '没有更多数据了'
                  return false
              }
          } else {
              if (!res.data.length) {
                  this.notMore = true;
                  this.loadOver = false;
              } else {
                  if (res.data.length < 5 && res.data.length != 0) {
                      this.loadOver = true;
                      this.loaded = '没有更多数据了';
                      this.notMore =false;
                  }
              }
          }

        // if(res.code === 200){
        //   if(!res.data.length){
        //     this.p--
        //   }
        //   this.reportContentList = res.data
        // }
      } catch(e) {
        console.log('error:', e)
      }
    },
    refresh() {
      this.refreshing = true
      this.$refs.container.scrollTop = 0
      this.p = 1
      this.getReport()
    },
    load() {
      // this.loading = true;
      // this.p++
      // this.getReport()

        if (!this.loadOver) {
            this.loading = true;
            clearTimeout(this.method);
            this.method = setTimeout(() => {
                this.p = this.p + 1;
                this.getReport(this.p);
                this.loading = false;
            }, 500);
        }
    }
  },
  components: {
        Loading
  },
}
</script>

<style lang="scss">
.reportList{
  position: relative;
  overflow-x: hidden;
  height: 100%;
  .title{
    font-size:28px;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(51,51,51,1);
    padding: 34px 0;
    padding-left: 13px;
    margin: 0;
  }
  .empty-text-wrap {
    width: 100%;
    height: 40vh;
    margin-top: 10vh;
  }
  ul{
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    li{
      display: flex;
      position: relative;
      width:343px;
      height:94px;
      background:rgba(255,255,255,1);
      box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.08);
      border-radius:4px;
      margin-bottom: 15px;
      box-sizing: border-box;
      padding: 22px 20px;
      &::before{
        content: '';
        position: absolute;
        left: 0;
        top: 20px;
        width:4px;
        height:26px;
        background:rgba(244,117,72,1);
        border-radius:0px 2px 2px 0px;
      }
      .content{
        flex:1;
        height: 100%;
        width: 100%;
        p{
          margin: 0;
          font-size:14px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(51,51,51,1);
          margin-bottom: 18px;
          overflow: hidden;/*超出部分隐藏*/
          text-overflow:ellipsis;/* 超出部分显示省略号 */
          white-space: nowrap;/*规定段落中的文本不进行换行 */
        }
        div{
          display: flex;
          justify-content: space-between;
          .tip{
            display: flex;
            align-items: center;
            img{
              width: 15px;
              height: 15px;
              margin-right: 5px;
            }
            span{
              font-size:12px;
              font-family:PingFang-SC-Medium;
              font-weight:500;
              color:rgba(204,204,204,1);
            }
          }
          .date{
            font-size:12px;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(153,153,153,1);
          }
        }
      }
    }
  }
}
.reportList .loading {
  width: 100%;
  font-size: 14px;
  color: #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
  &.notPageOne {
    margin-top: -40px;
  }
}
</style>
